<template>
  <div>
    <h1>新闻列表</h1>
    <!-- 类似与一级路由的写法，使用 router-link 编写连接，注意 to 加上上一级路由 -->
    <nav>
      <router-link to="/news-list/sports">体育新闻</router-link> |
      <router-link to="/news-list/technology">科技新闻</router-link>
      <router-link to="/news-detail/1">新闻 1</router-link>
      <router-link to="/news-detail/2">新闻 2</router-link>
    </nav>
    <router-view class="news-list"></router-view>
  </div>
</template> 
     <script>
// 引入二级路由组件
import Sports from "@/components/Sports";
import Technology from "@/components/Technology";
export default {
  components: {
    Sports,
    Technology,
  },
};
</script> 
 <style scoped>
.news-list {
  text-align: left;
  width: 600px;
  height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  margin: auto;
  margin-top: 20px;
}
</style> 
